* {
    margin: 0px;
    padding: 0px;
}

.flex_cent {
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    list-style: none;
}

.main {
    width: 750px;
    margin: 0px auto;
}

.topBox {
    width: 100%;
    height: 834px;
    background: url(../images/题二：实现成移动专题或小程序_01.png) 0 0 no-repeat;
}

.contBox {
    margin-top: -100px;
}

.title_a {
    height: 108px;
    font-weight: bold;
}

.title_a .imgBox {
    width: 114px;
    height: 108px;
    background: url(../images/32.png) 0 0 no-repeat;
    margin-right: 37px;
    color: white;
    font-size: 28px;
}

.title_a .txt {
    width: 480px;
    font-size: 38px;
    color: #3b83cd;
}

.YWJJBox {
    height: 168px;
    color: #316fc4;
}

.YWJJBox h2 {
    margin-left: 18px;
    font-size: 55px;
    margin-right: 10px;
}

.YWJJBox span {
    height: 55px;
    font-size: 9px;
    line-height: 110px;
}

.newsBox {
    margin-top: 11px;
}

.newsBox input {
    display: none;
}

.tabsBox {
    height: 50px;
}

.tabsBox li {
    width: 152px;
    height: 50px;
    background-color: #227bd5;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 0px 6px;
    font-size: 23px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 1s;
}

.tabsBox li::after {
    content: "";
    width: 0px;
    height: 0px;
    border-top: 13px solid #ff992d;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    position: absolute;
    top: 50px;
    display: none;
    transition: 1s;
}

input[id="chk1"]:checked~.tabsBox ul label:nth-child(1) li {
    background-color: #ff821e;
}

input[id="chk1"]:checked~.tabsBox ul label:nth-child(1) li::after {
    display: block;
}

input[id="chk2"]:checked~.tabsBox ul label:nth-child(2) li {
    background-color: #ff821e;
}

input[id="chk2"]:checked~.tabsBox ul label:nth-child(2) li::after {
    display: block;
}

input[id="chk3"]:checked~.tabsBox ul label:nth-child(3) li {
    background-color: #ff821e;
}

input[id="chk3"]:checked~.tabsBox ul label:nth-child(3) li::after {
    display: block;
}

input[id="chk4"]:checked~.tabsBox ul label:nth-child(4) li {
    background-color: #ff821e;
}

input[id="chk4"]:checked~.tabsBox ul label:nth-child(4) li::after {
    display: block;
}

.NewsListBox {
    width: 686px;
    height: 1101px;
    border-radius: 20px;
    margin: 0px auto;
    border: 2px solid #5b9ad9;
}

.photoNews {
    margin: 32px auto;
    margin-bottom: 0px;
    width: 637px;
    height: 393px;
    background: url(../images/image1.jpg) 0 0 no-repeat;
    display: flex;
    align-items: end;
}

.photoNews .title {
    width: 100%;
    height: 54px;
    font-size: 23px;
    color: white;
    background-color: #0077ff85;
}

.ListBox {
    width: 655px;
    margin: 0px auto;
}

.ListBox li {
    height: 225px;
    border-bottom: 1px solid #e0e1e1;
    display: flex;
    justify-content: start;
    align-items: center;
}

.ListBox li img {
    width: 199px;
    height: 157px;
    border-radius: 9px;
    margin-left: 8px;
    margin-right: 30px;
}

.ListBox h3 {
    width: 400px;
    font-size: 30px;
    line-height: 60px;
}

.AnimeBox,
.AnimeBox_2,
.AnimeBox_3,
.AnimeBox_4 {
    display: none;
}

.AnimeBox_2 .photoNews {
    background: url(../images/image3.jpg) 0 0 no-repeat;
}

.AnimeBox_3 .photoNews {
    background: url(../images/image5.jpg) 0 0 no-repeat;
}

.AnimeBox_4 .photoNews {
    background: url(../images/image6.jpg) 0 0 no-repeat;
}

input[id="chk1"]:checked~.NewsListBox .AnimeBox {
    display: block;
}

input[id="chk2"]:checked~.NewsListBox .AnimeBox_2 {
    display: block;
}

input[id="chk3"]:checked~.NewsListBox .AnimeBox_3 {
    display: block;
}

input[id="chk4"]:checked~.NewsListBox .AnimeBox_4 {
    display: block;
}

.footerBox {
    height: 268px;
    margin-top: 34px;
    background: url(../images/题二：实现成移动专题或小程序_02.png) 0 0 no-repeat;
}